<template>
	<view class="news-container">
		<!-- 横向滚动新闻分类 -->
		<!-- 		<scroll-view class="news-tabs" scroll-x :scroll-with-animation="true" :show-scrollbar="false">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }" @click="activeTab = index">
				<text>{{ tab }}</text>
			</view>
		</scroll-view> -->

		<!-- 新闻列表 -->
		<scroll-view class="news-list" scroll-y @scrolltolower="loadMore" :scroll-top="scrollTop" @scroll="handleScroll">
			<!-- 导航栏 -->
			<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="false">
				<u-navbar
					title="资讯"
					:title-bold="true"
					title-color="#000"
					:border-bottom="false"
					:is-fixed="false"
					custom-class="home-bg"
					:background="{ background: 'transparent' }"
					:is-back="false"
				></u-navbar>
			</u-sticky>

			<view style="padding: 50rpx 0">
				<view v-for="(item, index) in newsList" :key="index" class="news-card" @click="viewNewsDetail(item)">
					<view class="news-content">
						<view class="news-title">{{ item.title }}</view>
						<view class="news-desc"><rich-text :nodes="item.content" /></view>
						<view class="news-time">
							<u-icon name="clock" size="35" color="#999"></u-icon>
							<text>{{ item.createTime }}</text>
						</view>
					</view>
					<view class="flex flex-center align-center">
						<view class="news-image">
							<image :src="path + item.imgUrl.split(',')[0]" mode="aspectFill" />
						</view>
					</view>
				</view>

				<!-- 加载更多提示 -->
				<x-loading-more :loadingMore="loadingMore"></x-loading-more>

				<view v-if="newsList.length === 0" class="no-products">
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="该分类下暂无商品"></u-empty>
				</view>
			</view>
		</scroll-view>

		<x-back-top ref="backTopRef" @scrollToTop="scrollToTop"></x-back-top>
	</view>
</template>

<script>
import msgList from '@/api/msgList';
import api from '@/api/index.js';
export default {
	data() {
		return {
			path: api.getPath(),
			scrollTop: 0,
			activeTab: 0, // 当前选中的分类标签
			loadingMore: false,
			pageNum: 1,
			pageSize: 10,
			total: 0,
			tabs: ['推荐', '热门', '天气', '生活', '科技', '热门', '天气', '生活', '科技', '娱乐'],
			newsList: []
		};
	},
	onShow() {
		this.getAxnewsByList();
	},
	onPullDownRefresh() {
		// 重置页码
		this.pageNum = 1;

		//重新获取数据
		Promise.all([this.getAxnewsByList()]).finally(() => {
			// 停止下拉刷新动画
			uni.stopPullDownRefresh();
		});
	},
	methods: {
		// 处理滚动事件
		handleScroll(e) {
			this.$refs.backTopRef?.triggerHandleScroll(e);
		},
		// 滚动到顶部
		scrollToTop(e) {
			this.scrollTop = e; // 重置滚动位置
		},
		// 查看资讯详情
		viewNewsDetail(news) {
			uni.navigateTo({
				url: `/pages/msgList/particulars?id=${news.id}`
			});
		},
		//获取列表
		getAxnewsByList() {
			const _this = this;
			_this.loadingMore = true;
			msgList
				.getAxnewsByList({
					pageNum: _this.pageNum,
					pageSize: _this.pageSize
				})
				.then((res) => {
					_this.newsList = res.rows;
					_this.loadingMore = false;
				});
		},
		// 加载更多
		loadMore() {
			const _this = this;
			if (!_this.loadingMore) {
				_this.loadingMore = true;

				if (_this.total > _this.pageNum * _this.pageSize) {
					_this.pageNum++;
				} else {
					_this.loadingMore = false;
					return;
				}

				msgList
					.getAxnewsByList({
						pageNum: _this.pageNum,
						pageSize: _this.pageSize
					})
					.then((res) => {
						_this.newsList = [..._this.newsList, ...res.rows];
						_this.loadingMore = false;
					});
			}
		}
	},
	onLoad() {}
};
</script>

<style lang="scss" scoped>
.news-container {
	background: linear-gradient(167deg, #ffdad2 0%, transparent 25%);
	height: calc(100vh - 100rpx);
	display: flex;
	flex-direction: column;
}

.news-tabs {
	width: 100%;
	height: 80rpx;
	white-space: nowrap;
	background-color: rgba(255, 255, 255, 0.3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding: 0 20rpx;

	.tab-item {
		display: inline-block;
		padding: 0 30rpx;
		height: 100%;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #666;
		position: relative;

		&.active {
			color: #ff3a3a;
			font-weight: bold;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 6rpx;
				background-color: #ff3a3a;
				border-radius: 3rpx;
			}
		}
	}
}

.news-list {
	flex: 1;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 10rpx 10rpx 30rpx;
}

.news-banner {
	height: 300rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin-bottom: 30rpx;

	.swiper,
	image {
		width: 100%;
		height: 100%;
	}
}

.news-card {
	display: flex;
	background-color: #ffffff;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	margin-bottom: 30rpx;

	.news-content {
		flex: 1;
		padding: 25rpx;
		padding-right: 5rpx;

		.news-title {
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 15rpx;
			line-height: 1.4;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}

		.news-desc {
			font-size: 28rpx;
			color: #666;
			line-height: 1.5;
			margin-bottom: 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.news-time {
			display: flex;
			// align-items: center;
			height: 35rpx;

			font-size: 24rpx;
			line-height: 35rpx;
			color: #999;

			text {
				vertical-align: middle;
				margin-left: 10rpx;
			}
		}
	}

	.news-image {
		width: 250rpx;
		height: 180rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 20rpx;
		flex-shrink: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}
}
.no-products {
	padding: 100rpx 0;
}
</style>
